<template>
  <div class="app">
<h2>我是App组件</h2>
<!-- 解决异步任务产生的问题 -->
 <!-- 把子组件用 <Suspense><template v-slot:default></template></Suspense>包起来，然后template v-slot:default-->
<Suspense>
  <template v-slot:default>
    <Child></Child>
  </template>
  <!-- v-slot:fallback：异步加载未完成时出现 -->
  <template v-slot:fallback>
    <h2>加载中。。。。。。</h2>
  </template>
</Suspense>

  </div>
</template>

<script setup>
import Child from './Child.vue';
import { Suspense } from 'vue';
</script>

<style lang="scss" scoped>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px;
  }
</style>